<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="500"
    >
      <el-table-column prop="code" label="实验室编号"> </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <span>
            {{
              scope.row.sex === "0"
                ? "男"
                : scope.row.sex === "1"
                ? "女"
                : "未知"
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="familyHistory" label="家族遗传史">
      </el-table-column>
      <el-table-column prop="address" label="地区"> </el-table-column>
      <el-table-column prop="checkTime" label="筛选时间" :sort-method="sortByDate">
        <template slot="header" slot-scope="{scope}">
          <div>
            <span style="margin-right: 10px">筛选时间</span>
            <i class="el-icon-d-caret" @click="sortByDate"></i>
            </div>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="筛选结果" width="240px">
        <template slot-scope="scope">
          <span class="over-text">{{ scope.row.result }}</span>
          <!-- <el-tooltip placement="top">
            <div>{{scope.row.result}}</div>
          </el-tooltip> -->
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="goSeeUser(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="beforeRemove(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 确认删除弹框 -->
    <div class="patient-dialog">
      <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%">
        <span>确认要删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="remove">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { remove } from "@/api/customer";
export default {
  props: ["patientList"],
  mounted () {
    if (!this.tableData.length) {
       this.loadingState('加载中')
 
    }
  },
  watch: {
    tableData () {
      this.loadingState().close()
    },
    patientList(lists) {
      this.tableData = lists;
    },
  },
  data() {
    return {
      tableData: [],
      centerDialogVisible: false,
      removeCustomerId: 0,
      count: 2
    };
  },
  methods: {
    loadingState(text) {
      const loading2 = this.$loading({
        lock: true,
        text: text,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return loading2;
    },
    sortByDate () {
      this.$emit('sortPatient')
    },
    goSeeUser(item) {
      this.$router.push({
        path: "/dashboard/seeuser",
        query: {
          customerId: item.customerId,
        },
      });
    },
    beforeRemove(item) {
      this.centerDialogVisible = true;
      this.removeCustomerId = item.customerId;
      console.log(this.removeCustomerId);
    },
    /**
     * 删除患者信息
     */

    async remove() {
      const res = await remove(this.removeCustomerId);
      console.log("删除结果", res);
      if (res.code != 200) return;
      Message.success("删除成功！");
      this.$emit("getPatientList", false, true);
      this.centerDialogVisible = false;
    },
  },
};
</script>

<style scoped>
.over-text {
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow:hidden;
-webkit-box-orient: vertical;

}
>>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  width: 20px;
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px #cdd2e5 inset;
}

>>> .el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体*/
  width: 0.5rem;
  height: 0.5rem;
}
>>> .el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条轨道*/
  border-radius: 0;
}
>>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面的滑块*/
  background-color: #a8a8a8;
  border-radius: 0.25rem;
}
>>> .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  /*滚动条鼠标事件，鼠标放上去出现的事件*/
  background-color: rgba(95, 95, 95, 0.7);
}
</style>
